<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui">


    <div class="panelTitulo">
        Busqueda
    </div> 

    <p:panel header="Busqueda" 
             style="border: none; width: 75%; margin: 5px auto;">
        <h:form id="BusquedaUsuarioCreateForm">
            <h:panelGroup id="display">
                #{usuarioController.iniciarBusqueda()}
                <h:panelGrid 
                    columns="4" 
                    border="0"
                    columnClasses="column1Class, column2Class,column3Class,column4Class" 
                    >
                    <p:outputLabel rendered="true" value="#{bundleEtiquetasES.Habilidad}" 
                                   for="habilidad" />
                    <p:selectOneMenu id="habilidad" 
                                     value="#{usuarioController.habilidadBusqueda}"
                                     >
                        <f:selectItem itemLabel="#{bundleEtiquetasES.Seleccione}"/>
                        <f:selectItems value="#{usuarioController.itemsHabilidades}"
                                       var="HabilidadItem"
                                       itemValue="#{HabilidadItem}"
                                       itemLabel="#{HabilidadItem.nombre}"
                                       />
                        <f:converter binding="#{habilidadesConverter}"/>
                    </p:selectOneMenu>
                    <p:outputLabel rendered="true" value="#{bundleEtiquetasES.Espectativa}" 
                                   for="espectativa" />
                    <p:selectOneMenu id="espectativa" 
                                     value="#{usuarioController.espectativaBusqueda}"
                                     >
                        <f:selectItem itemLabel="#{bundleEtiquetasES.Seleccione}"/>
                        <f:selectItems value="#{usuarioController.itemsEspectativas}"
                                       var="EspectativaItem"
                                       itemValue="#{EspectativaItem}"
                                       itemLabel="#{EspectativaItem.nombre}"
                                       />
                        <f:converter binding="#{espectativasConverter}"/>
                    </p:selectOneMenu>

                </h:panelGrid>

                <div  style="margin-left: 50%; margin-bottom: 20px; margin-top: 10px;">
                    <p:commandButton actionListener="#{usuarioController.AgragarHabEspBusqueda}" 
                                     value="#{bundleEtiquetasES.Agregar}" icon="ui-icon-disk" 
                                     update=":BusquedaUsuarioCreateForm:datalistHabEsp,:BusquedaUsuarioListForm"/>

                    <p:commandButton actionListener="#{usuarioController.QuitarHabEspBusqueda}"
                                     value="#{bundleEtiquetasES.Quitar}" 
                                     icon="ui-icon-circle-close"
                                     update=":BusquedaUsuarioCreateForm:datalistHabEsp,:BusquedaUsuarioListForm"/>
                </div>

                <p:panel header="Lista Hablidades-Espectativas" style="border: none; width: 100%; margin: 0 auto;">
                    <p:dataTable id="datalistHabEsp" value="#{usuarioController.itemsHabilidadesEspectativas}" var="item"
                                 selectionMode="single" 
                                 selection="#{usuarioController.habilidadesEspectativaSeleccionado}"
                                 paginator="true"
                                 rowKey="#{item.userHabilidadesEspectativasPK}"
                                 rows="5"
                                 >

                        <p:column >
                            <f:facet name="header">
                                <h:outputText value="#{bundleEtiquetasES.Habilidad}"/>
                            </f:facet>
                            <h:outputText value="#{item.habilidades.nombre}"/>
                        </p:column>
                        <p:column >
                            <f:facet name="header">
                                <h:outputText value="#{bundleEtiquetasES.Espectativa}"/>
                            </f:facet>
                            <h:outputText value="#{item.espectativas.nombre}"/>
                        </p:column>

                    </p:dataTable>
                </p:panel>
                <h:panelGrid 
                    columns="4" 
                    border="0"
                    columnClasses="column1Class, column2Class,column3Class,column4Class,column3Class,column4Class" 
                    >
                    <p:outputLabel value="#{bundleEtiquetasES.Pais}" for="pais" />
                    <p:selectOneMenu id="pais" 
                                     value="#{usuarioController.pais}">
                        <f:selectItem itemLabel="Cualquiera"/>
                        <f:selectItems value="#{usuarioController.itemPaises}"
                                       var="PaisItem"
                                       itemValue="#{PaisItem}"
                                       itemLabel="#{PaisItem.nombre}"
                                       />
                        <f:converter binding="#{paisConverter}"/>
                        <p:ajax event="change" 
                                listener="#{usuarioController.cambiaPaisBusqueda()}" 
                                update=":BusquedaUsuarioCreateForm:provincia,:BusquedaUsuarioCreateForm:ciudad,:BusquedaUsuarioListForm"/>
                    </p:selectOneMenu>

                    <p:outputLabel value="#{bundleEtiquetasES.Provincia}" for="provincia" />
                    <p:selectOneMenu id="provincia" 
                                     value="#{usuarioController.provincia}">
                        <f:selectItem itemLabel="Cualquiera"/>
                        <f:selectItems value="#{usuarioController.itemProvincias}"
                                       var="ProvinciaItem"
                                       itemValue="#{ProvinciaItem}"
                                       itemLabel="#{ProvinciaItem.nombre}"
                                       />
                        <f:converter binding="#{regionConverter}"/>
                        <p:ajax event="change" 
                                listener="#{usuarioController.cambiaProvinciaBusqueda()}" 
                                update=":BusquedaUsuarioCreateForm:ciudad,:BusquedaUsuarioListForm"/>
                    </p:selectOneMenu>

                    <p:outputLabel value="#{bundleEtiquetasES.Ciudad}" for="ciudad" />
                    <p:selectOneMenu id="ciudad" 
                                     value="#{usuarioController.ciudad}">
                        <f:selectItem itemLabel="Cualquiera"/>
                        <f:selectItems value="#{usuarioController.itemCiudades}"
                                       var="CiudadItem"
                                       itemValue="#{CiudadItem}"
                                       itemLabel="#{CiudadItem.nombre}"
                                       />
                        <f:converter binding="#{ciudadConverter}"/>
                    </p:selectOneMenu>
                    <p:outputLabel value="BARRIO" for="barrio" />
                    <p:inputText id="barrio" 
                                 onkeyup="value = value.toUpperCase()"
                                 value="#{usuarioController.selected.direccion}"/>

                </h:panelGrid>
                <div  style="margin-left: 50%; margin-bottom: 20px; margin-top: 10px;">
                    <p:commandButton action="#{usuarioController.cargarUsuariosBusqueda}" 
                                     value="BUSCAR" icon="ui-icon-search" 
                                     update=":BusquedaUsuarioCreateForm:datalistHabEsp,:BusquedaUsuarioListForm"/>


                </div>
            </h:panelGroup>
        </h:form>
    </p:panel>
    <p:separator style="border-style: dotted; width: 75%; margin-bottom: 10px;"/>
    <ui:include src="lista.xhtml"/>
</ui:composition>

